<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>公历&农历选择器</title>
    <meta
      name="viewport"
      content="minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0,user-scalable=no"
    />
    <link rel="stylesheet" type="text/css" href="css/iosSelect.css" />
    <link href="css/current.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="data-select">
      <form action="/" method="post" class="form">
        <div class="data-bg">
          <label class="form-item item-line selectDate">
            <b>出生日期：</b>
            <div class="pc-box">
              <span data-year="" data-month="" data-date="" class="showDate">请选择(必填)</span>
            </div>
          </label>
        </div>
        <input name="sex" type="hidden" class="sex" value="0" />
        <input type="hidden" name="data-year" class="data-year" value="" />
        <input type="hidden" name="data-month" class="data-month" value="" />
        <input type="hidden" name="data-date" class="data-date" value="" />
        <input type="hidden" name="data-time" class="data-time" value="" />
        <!-- <span class="button" onclick="submit()">获取</span> -->
      </form>
    </div>

    <script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="js/Lunar.js"></script>
    <script type="text/javascript" src="js/calendar.js"></script>
    <script type="text/javascript" src="js/iosSelect.js"></script>
    <!-- <script type="text/javascript" src="js/jquery-form.js"></script> -->
    <script type="text/javascript">
      class DoubleCalendar {
        constructor(options) {
          this.selectDateType = options?.selectDateType || 1 // 当前操作日历的类型（公历选择器/农历选择器）
          this.numFlag = options?.numFlag || '7月' // 存储公历月份（用来判断当前选择是公历还是农历？）
          this.bigNum = options?.bigNum || '正|二|三|四|五|六|七|八|九|十|冬|腊' // 存储农历月份（用来判断当前选择是公历还是农历？）
          this.selectDateDom = $(options?.selectDateDom || '.selectDate') // 触发日期选择器下拉的 jq 元素容器
          this.showDateDom = $(options?.showDateDom || '.showDate') // 展示选择后日期的 jq 元素容器
          this.calendarConverter = new Calendar() // calendar.js 提供的 Calendar 类
          /**
           * @description:日历选择器的初始化时间
           * @value {*} 默认是当前日期时间点
           * @value {*} 提供日期的字符串格式
           */
          this.initialDate = options?.initialDate ? new Date(options.initialDate) : new Date()
          this.timeData = this.calendarConverter.getTime() // 获取时间点
          /**
           * @description: 自调用方法
           * @return {*}
           */
          this.initDateFn()
          console.log(this.initCalendar())
          /**
           * ! 类-constructor 内会自动执行
           */
          // 点击触发选择出生日期
          this.selectDateDom.on('click', function () {
            this.initCalendar()
          })
          // iosSelect 下拉实例
          this.iosSelect = null
        }
        /**
         * @description:日历选择器初始化选中时间的方法
         * @return {*}
         */
        initDateFn() {
          this.showDateDom.attr('data-year', this.initialDate.getFullYear())
          this.showDateDom.attr('data-month', this.initialDate.getMonth() + 1)
          this.showDateDom.attr('data-date', this.initialDate.getDate())
          // showDateDom.attr('data-time', '时间未知')
        }
        // 年、月、日、生辰 ---------------------------------- start
        yearData(callback) {
          callback(
            this.selectDateType === 1
              ? this.calendarConverter.initNormalCalendar()
              : this.calendarConverter.initLunarCalendar()
          )
        }
        monthData(year, callback) {
          callback(
            this.selectDateType === 1
              ? this.calendarConverter.getMonths(year)
              : this.calendarConverter.getLunarMonths(year)
          )
        }
        dateData(year, month, callback) {
          callback(
            this.selectDateType === 1
              ? this.calendarConverter.getDayCount(month)
              : this.calendarConverter.getLunarDayCount(year, month)
          )
        }
        // 见 this.timeData
        // 年、月、日、生辰 ---------------------------------- end
        // 创建日期表
        initCalendar() {
          if (this.bigNum.indexOf(this.numFlag.substr(0, 1) >= 0)) {
            // 公历 --> 需转化成农历
            const toSolarObj = Lunar.toSolar(
              this.showDateDom.attr('data-year'),
              this.showDateDom.attr('data-month'),
              this.showDateDom.attr('data-date')
            )
            var oneLevelId = toSolarObj[0],
              twoLevelId = toSolarObj[1],
              threeLevelId = toSolarObj[2],
              fourLevelId = this.showDateDom.attr('data-time')
            // 更新此时的状态
            this.showDateDom.attr('data-year', toSolarObj[0])
            this.showDateDom.attr('data-month', toSolarObj[1])
            this.showDateDom.attr('data-date', toSolarObj[2])
            this.numFlag = toSolarObj[1] + '月'
          } else {
            // 公历 --> 则不转化
            const oneLevelId = showDateDom.attr('data-year'),
              twoLevelId = showDateDom.attr('data-month'),
              threeLevelId = showDateDom.attr('data-date'),
              vfourLevelId = showDateDom.attr('data-time')
          }
          this.createCalendar(oneLevelId, twoLevelId, threeLevelId, fourLevelId, 'active')
        }
        /**
         * @description: 公历 & 农历切换
         * @param {*} obj 日期切换按钮
         * @param {*} num 标识当前日期记录方式（公历/农历）
         */
        changeEvent(obj, num) {
          if (this.selectDateType === num) return
          this.selectDateType = num
          // 不能同时存在两个iosselect组件
          $('.olay').remove()
          if (this.selectDateType === 1) {
            // 农历
            this.initCalendar()
            $('.' + obj.className)
              .eq(num - 1)
              .addClass('actice')
              .siblings()
              .removeClass('active')
          } else {
            // 公历则转换成农历
            if (this.bigNum.indexOf(this.numFlag.substr(0, 1)) < 0) {
              const toLunarObj = Lunar.toLunar(
                this.showDateDom.attr('data-year'),
                this.showDateDom.attr('data-month'),
                this.showDateDom.attr('data-date')
              )
              const oneLevelId = toLunarObj[0],
                twoLevelId = toLunarObj[1],
                threeLevelId = toLunarObj[2],
                fourLevelId = showDateDom.attr('data-time')
              this.showDateDom.attr('data-year', toLunarObj[0])
              this.showDateDom.attr('data-month', toLunarObj[1])
              this.showDateDom.attr('data-date', toLunarObj[2])
              this.numFlag = toLunarObj[5].substr(-2, 2)
            } else {
              // 若是农历则不转化
              const oneLevelId = showDateDom.attr('data-year'),
                twoLevelId = showDateDom.attr('data-month'),
                threeLevelId = showDateDom.attr('data-date'),
                fourLevelId = showDateDom.attr('data-time')
            }
            // 切换成农历时,需要重新创建组件
            this.createCalendar(oneLevelId, twoLevelId, threeLevelId, fourLevelId, 'active')
            $('.' + obj.className)
              .eq(num - 1)
              .addClass('active')
              .siblings()
              .removeClass('active')
          }
        }
        /**
         * @description:  创建组件
         * @param {*} oneLevelId
         * @param {*} twoLevelId
         * @param {*} threeLevelId
         * @param {*} fourLevelId
         * @param {*} activeClassName
         * @return {*}
         */
        createCalendar(
          oneLevelId,
          twoLevelId,
          threeLevelId,
          fourLevelId,
          activeClassName,
          options
        ) {
          const flag = this.selectDateType === 1
          // 日历切换选项
          const title =
            '<div><span class="' +
            (flag ? activeClassName : '') +
            ' calendar" onclick="changeEvent(this,1)">公历</span><span class="calendar ' +
            (!flag ? activeClassName : '') +
            '" onclick="changeEvent(this,2)">农历</span></div>'
          // 创建组件
          this.iosSelect = new IosSelect(
            4,
            [this.yearData, this.monthData, this.dateData, this.timeData],
            {
              title: title, // 日历切换选项
              headerHeight: options?.iosSelect?.headerHeight || 64, // 选择器头部高度
              itemHeight: options?.iosSelect?.itemHeight || 50, // 日期子项高度
              itemShowCount: options?.iosSelect?.itemShowCount || 5, // 竖直可拖动项个数
              itemShowCount: options?.iosSelect?.itemShowCount || 5, // 竖直可拖动项个数
              // 传入的初始化选中的 日期 id 值
              oneLevelId: oneLevelId,
              twoLevelId: twoLevelId,
              threeLevelId: threeLevelId,
              fourLevelId: fourLevelId,
              // 回调的形参是自动获取的参数
              callback: function (selectOneObj, selectTwoObj, selectThreeObj, selectFourObj) {
                this.showDateDom.attr('data-year', selectOneObj.id)
                this.showDateDom.attr('data-month', selectTwoObj.id)
                this.showDateDom.attr('data-date', selectThreeObj.id)
                this.showDateDom.attr('data-time', selectFourObj.id)
                // 公历选择器 --- 获取公历 & 农历
                if (this.selectDateType === 1) {
                  // 公历 -> 农历
                  const toLunarObj = Lunar.toLunar(
                    selectOneObj.id,
                    selectTwoObj.id,
                    selectThreeObj.id
                  )
                  console.log(
                    '公历1',
                    selectOneObj.value +
                      selectTwoObj.value +
                      selectThreeObj.value +
                      ' ' +
                      selectFourObj.name
                  )
                  console.log(
                    '农历1',
                    toLunarObj[0] + '年' + toLunarObj[5] + toLunarObj[6] + ' ' + selectFourObj.name
                  )
                } else {
                  // 农历选择器 --- 获取公历 & 农历
                  // 农历 --> 公历
                  const toSolarObj = Lunar.toSolar(
                    selectOneObj.id,
                    selectTwoObj.id,
                    selectThreeObj.id
                  )
                  console.log(
                    '公历2',
                    selectOneObj.value +
                      selectTwoObj.value +
                      selectThreeObj.value +
                      ' ' +
                      selectFourObj.name
                  )
                  console.log(
                    '农历2',
                    toSolarObj[0] +
                      '年' +
                      toSolarObj[1] +
                      '月' +
                      toSolarObj[2] +
                      '日' +
                      ' ' +
                      selectFourObj.name
                  )
                }
              },
            }
          )
        }
      }

      const dcInstance = new DoubleCalendar({
        initialDate: '2023-06-22',
      })

      console.log(dcInstance)
    </script>
  </body>
</html>
